<template>
  <div class="recommend">
    <div class="nor-card">
      <div class="recommend-blog" style="display: block; padding: 1px;">
        <div class="recommend-blog-back" style="background-color: rgba(112,161,255,0.3);"></div>
        <div style="padding-top: 40px">
          <div class="page-card-box" v-for="(item,index) in blogs" v-bind:key="index">
            <blog-card-style1 :blog="item"/>
            <div class="cross-line" v-if="index !== blogs.length - 1"></div>
          </div>
          <div style="display: inline-block;">
            <div class="main_div f2-zlz" v-if="!loading">
              <button v-on:click="loadMore">加载更多</button>
            </div>
            <div style="display: inline-block;margin-top: 10px" v-if="loading">
              <loading height="100"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import BlogCardStyle1 from "@/public/blogcard/style1";
import Loading from "@/public/loading";

export default {
  name: "HomePage",
  components: {Loading, BlogCardStyle1},
  props: {
    backColor: {
      type: String,
      default: 'f8deac'
    },
    blogs: {
      type: Array,
    }
  },
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    loadMore() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1500)
      this.$emit('loadMore')
    }
  }
}
</script>

<style scoped>
.cross-line {
  width: 85%;
  border-top: 20px dashed rgba(112, 161, 255, 0.1);
  margin: 0 auto;
}

.page-card-box {
  text-align: left;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* From uiverse.io by @SanketSuryawanshi */
.main_div {
  --color: #3992e6;
  position: relative;
  z-index: 1;
  margin: 30px 0;
}

.main_div::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background: transparent;
  top: -7px;
  left: -7px;
  z-index: -5;
  border-top: 3px solid var(--color);
  border-left: 3px solid var(--color);
  transition: 0.5s;
}

.main_div::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background: transparent;
  bottom: -7px;
  right: -7px;
  z-index: -5;
  border-right: 3px solid var(--color);
  border-bottom: 3px solid var(--color);
  transition: 0.5s;
}

.main_div:hover::before {
  width: 100%;
  height: 100%;
}

.main_div:hover::after {
  width: 100%;
  height: 100%;
}

.main_div button {
  padding: 2px 5px;
  background: none;
  color: #9a906a;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
</style>